<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../static/vue.js"></script>
</head>
<body>
<div id="root">
  <div>
    <input type="text" v-model="todoValue">
    <button @click="handleBtnClick">提交</button>
  </div>
  <ul>
    <todo-item v-bind:content="item"
                v-bind:index="index"
                v-for="(item,index) in list"
                @delete="handleItemDelete">{{item}}
    </todo-item>
  </ul>
</div>

<script>
  /* //创建vue全局组件
  //父组件向子组件传值 v-bind:content="item"
   Vue.component("todo-item",{
     props:['content'],
     template:"<li>{{content}}</li>"
   })*/
  //子组件向父组件传值
  var todoItem={
    props:['content','index'],
    template:"<li @click='handleItemClick'>{{content}}</li>",
    methods: {
      handleItemClick:function () {
        this.$emit("delete",this.index);
      }
    }
  }

  var app=new Vue({
    el:'#root',
    components:{
      todoItem:todoItem
    },
    data:{
      list:[],
      todoValue:''
    },methods:{
      handleBtnClick:function () {
        this.list.push(this.todoValue);
        this.todoValue='';
      },
      handleItemDelete:function (index) {
        this.list.splice(index,1);
      }
    }
  })
</script>
</body>
</html>
